import React , { useState , useCallback } from "react";
import Header from './Header';
import List from "./List";
import Input from "./Input";

const App = () => {
    const [list,setList] = useState([]);

    const del = (id) => {
        setList(list.filter(item => id !== item.id))
    }
    const toggleItem = (id) => {
        const newList = list.map(item => {
            return item.id === id?{...item,done:!item.done}:item;
        });
        
        setList(newList);
    }
    
    //用来缓存一个函数
    const add = useCallback((title) => {
        setList((list) => [{done:false,id:Date.now(),title},...list])
    },[]);

    return <div>
        <Header />
        <Input add={add} />
        <List list={list} del={del} toggleItem={toggleItem}/>
    </div>
}

export default App;

// toggleItem = (id) => {
//     const newList = this.state.list.map(item => {
//         return item.id === id?{...item,done:!item.done}:item;
//     });

//     this.setState({
//         list:newList
//     });
// }

{/* <div>
            
            <ul>
                {
                    this.state.list.map(item => {
                        return <li style={{
                            background:item.done?"red":"#fff"
                        }} key={item.id}>
                            <span onClick={() => this.toggleItem(item.id)}>{
                                item.done
                                ?<span>√</span>
                                :<input type="checkbox" />
                            }</span>
                            <span style={{
                                textDecoration:item.done?"line-through":"none"
                            }}>{item.title}</span>
                            <button onClick={() => this.deleteItem(item.id)}>X</button>
                        </li>
                    })
                }
            </ul>
        </div> */}